import React, { useEffect, useState } from 'react';
import { Spin } from 'antd';
import { TRDefault } from '@/components/index.js';
import { RadioGroup } from '../../../components';
import { PredictivePowerEcharts } from '../../../components/Charts/index.js';
import type {
  IPostPredictivePowerDataParamsType,
  IFormValue,
  IPredictivePowerDataType,
  IDataListType,
} from '../../../type';
import { INuclearPowerStatusType } from '../../../type';
import { nuclearPowerStatusOptions } from '../../../dictionary';
import styles from './index.less';

interface IProps {
  /**
   * lodaing
   */
  loading?: boolean;
  /**
   * error
   */
  error?: boolean;
  /**
   * formValue
   */
  formValue?: IFormValue;
  /**
   * 数据源
   */
  data?: {
    predictivePowerData?: IPredictivePowerDataType;
    maintenanceScheduleData?: IDataListType[];
  };
  /**
   * 装机容量
   */
  capacity?: number;
  /**
   * 核减状态
   */
  nuclearPowerStatus?: INuclearPowerStatusType;
  /**
   * 获取预测功率数据
   */
  onSearch: (params: IPostPredictivePowerDataParamsType) => void;
}

const PredictivePower = (props: IProps) => {
  const {
    loading = false,
    error = false,
    formValue,
    data,
    capacity,
    nuclearPowerStatus: _nuclearPowerStatus,
    onSearch,
  } = props;
  const [nuclearPowerStatus, setNuclearPowerStatus] = useState<INuclearPowerStatusType>(
    INuclearPowerStatusType.AFTER,
  );

  useEffect(() => {
    if (_nuclearPowerStatus) {
      setNuclearPowerStatus(_nuclearPowerStatus);
    }
  }, [_nuclearPowerStatus]);

  const onChangeNuclearPowerStatus = (e: INuclearPowerStatusType) => {
    setNuclearPowerStatus(e);
    const postPredictivePowerDataParams: IPostPredictivePowerDataParamsType = {
      ...formValue,
      valueType: e,
    };
    onSearch && onSearch(postPredictivePowerDataParams);
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <div className={styles.left}>
          {/* <ExplainTitle title={titleMap[ITitleType.PREDICTIVE_POWER].title} /> */}
          <div className={styles.unit}>
            <span className={styles.unitTitle}>单位：</span>
            <span className={styles.unitValue}>MW</span>
          </div>
        </div>
        <div className={styles.right}>
          <RadioGroup
            value={nuclearPowerStatus}
            defaultValue={INuclearPowerStatusType.AFTER}
            options={nuclearPowerStatusOptions}
            onChange={onChangeNuclearPowerStatus}
          />
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <Spin />
        ) : error ? (
          <TRDefault type={'emptysm'} message={'系统异常'} />
        ) : data ? (
          <div className={styles.charts}>
            <PredictivePowerEcharts
              data={data}
              capacity={capacity}
              startDate={formValue?.startDate}
              endDate={formValue?.endDate}
            />
          </div>
        ) : (
          <TRDefault type={'emptysm'} message={'暂无数据'} />
        )}
      </div>
    </div>
  );
};

export default PredictivePower;
